<template>
	<view>
		<!-- 顶部标签栏 -->
		<selectTemp 
			:sortData="sortData" 
			:de_staffid="de_staffid" 
			:de_type="de_type"
			:de_starttime="de_starttime" 
			:de_endtime="de_endtime"
			 @sortClick="sortClick" 
			 @screenClick="screenClick"
			 @queryData="queryData"
		>
		</selectTemp>
		<!-- 客户信息 -->
		<view class="manage_con">
			<view class="clineInfo" v-for="(item,index) in list" :key="index">
				<view class="info_head">
					<view>{{item.member ? item.member.memberName : '散客'}}</view>
				</view>
				<view class="info_main">
					<view @click="toMorsse(item.id,1)">
						<view class="main_left">
							<view class="left_top" style="margin: 30rpx 0;color: #666;font-size: 30rpx;">
								订单编号：{{item.order_id}}
							</view>
							<view class="left_followUp">
								<view>下单时间：</view>
								<view>{{item.addTimeStr}}</view>
							</view>
							<view class="left_star">
								<view>订单总价：</view>
								<view>
									{{item.totalPrice}} <u-tag v-if="item.orderArrears&&item.orderArrears>0" type="error"  :text="'欠费'+item.orderArrears"  />
								</view>
							</view> 
							<view class="left_star">
								<view>
									{{item.comsume_info}}
								</view>
							</view>   
							<view class="left_star"  v-if="item.sign_img" @click="previewImg(item.sign_img)" >
								<view>
									<image :src="item.sign_img" style="width: 200rpx;height: 100rpx;" mode="scaleToFill">
									</image>
								</view>
							</view>  
						</view>
					</view>
					<view class="main_right">
						<image v-if="item.checkStatus==-1" :src="BASE_IMG_URL+'butongguo.png'"  mode="scaleToFill">
						</image>
						<image v-if="item.checkStatus==0" :src="BASE_IMG_URL+'shenhezhong.png'"  mode="scaleToFill">
						</image>
						<image v-if="item.checkStatus==1" :src="BASE_IMG_URL+'yishenhe.png'"  mode="scaleToFill">
						</image>
					</view>
				</view> 
				<view class="info_main">
					<view @click="showModifyAchieve(item)">
						<view class="main_left">
							<view class="left_foot"  v-if="item.staffArchiveLog && item.staffArchiveLog.sale.length >0">
								<view class="l_box">
									<view class="fontColor">销售业绩：<span class="layui-row" v-for="achieve in item.staffArchiveLog.sale">{{achieve.staff?achieve.staff.trueName:'已删除员工'}}  {{achieve.salesAmount}}元(提成{{achieve.project_unit}})</span></view>
								</view> 
							</view> 
							<view class="left_foot"  v-if="item.staffArchiveLog && item.staffArchiveLog.consume.length >0">
								<view class="l_box">
									<view class="fontColor">耗卡业绩：<span class="layui-row" v-for="achieve in item.staffArchiveLog.consume">{{achieve.staff?achieve.staff.trueName:'已删除员工'}}  {{achieve.project_consume}}元(手工{{achieve.manual}})</span></view>
								</view> 
							</view> 
						</view>
					</view>  
				</view> 
				<view class="info_main new_fllow" v-if="needShow(item)"  @hidePopup="togglePopup('')">
							<AchievePanel :ref="'ap'+item.id" :ofId="item.id" :orderType="Number(item.order_type)" :osrs="JSON.parse(item.orderStaffRecords||[])" from="orderMgr" @onSure="onSure"></AchievePanel> 
				</view> 
				<view class="info_footer">
					<view class="footer_content" v-if="false" @click="nursinglogClick(item.id,1)">
						<image :src="BASE_IMG_URL+'tj.png'"  mode="scaleToFill"></image>
						<view>护理记录</view>
					</view> 
					
					<view class="footer_content"  @click="toOrderSign(item.id)">
						<image :src="BASE_IMG_URL+'index_btn_13.png'"  mode="scaleToFill"></image>
						<view>{{item.sign_img?"重签":"签名"}}</view>
					</view> 
					<view class="footer_content" @click="audit(item.id,1)">
						<image :src="BASE_IMG_URL+'shenhe.png'"  mode="scaleToFill"></image>
						<view>审核</view>
					</view> 
					
					<view class="footer_content" @click="showModifyAchieve(item)">
						<image :src="BASE_IMG_URL+'morebtn.png'"  mode="scaleToFill"></image>
						<view>改业绩</view>
					</view>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
			<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
		</view> 
 
		<u-action-sheet
			:list="taskActions" 
			v-model="taskShow"
			:cancel-btn = "true"
			@cancel.natice="onCancel"
		></u-action-sheet>
		<u-action-sheet
			:list="telActions" 
			v-model="telShow"
			:cancel-btn = "true"
			@cancel.natice="onCancel"
			@select="selectPhone"
		></u-action-sheet>
		<!-- 底部导航 -->
		<uniTabbar z-index="10" v-if="tipNumber || tipNumber==0" :tipNumber="tipNumber"></uniTabbar>
		
		<uni-popup :show="showOrderAuditPanel === true" position="top" mode="fixed" @hidePopup="togglePopup('')"> 
			<orderaudit    ref="orderaudit" @onaudited="onaudited" ></orderaudit> 
		</uni-popup> 
		
	</view>
</template>

<script>
	import uniTabbar from '@/components/tabbar/tabbar.vue'
	import selectTemp from '@/components/content/selectTemp/selectTemp.vue';
	import orderaudit from '../components/orderaudit';
	import AchievePanel from '../components/AchievePanel'; 
			
	import {
		customerSortDatas
	} from 'components/content/data/data.js';
	import { BASE_IMG_URL } from '@/util/api.js'
	import {
		customerPageJumps
	} from "../crm_page_jumps.js";
	import {
		netOrderDetail ,
		netOrderList,
		netOrderModifyAchieve,
		netOrderAudit
	} from '@/api/main.js'
	import {
		netAgentList
	} from '@/api/clues.js'
	export default {
		mixins: [customerPageJumps], 
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL, 
				currentOrderid: '',
				showOrderAuditPanel: false,
				sort: false,
				screen: false,
				date: '',
				show: false,
				sortData: customerSortDatas,
				screenData: [],
				taskShow: false,
				telShow: false,
				description: '',
				taskActions: [{
						name: '普通任务',
						color: '#03aa96'
					},
					{
						name: '跟进任务',
						color: '#03aa96'
					}
				],
				telActions: [],
				queryObj: {},
				page: 1,
				totalPage: 1,
				limit: 10,
				list: [],
				//默认 筛选条件
				de_type: 100,
				de_starttime: '',
				de_endtime: '',
				de_staffid: null,
				tipNumber: null,
				isAdd:true,
			}
		},
		components: {
			selectTemp,
			orderaudit,
			AchievePanel,
			uniTabbar
		},
		onLoad(options) {
			if (options.type) {
				this.de_type = options.type
				this.de_starttime = options.startTime
				this.de_endtime = options.endTime
				this.de_staffid = options.staffid
			}
		},
		onShow() {
			this.getTip()
		},
		onReachBottom() {
			if (this.page >= this.totalPage) {
				return
			}
			this.page++
			this.getList()
		},
		methods: {
			//预览
			previewImg(img) {
				uni.previewImage({
					urls: [img] //预览图片 数组
				});
			},
			needShow: function(item) {
				var that = this; 
				if(that.currentOrderid == item.id) {
					return true
				}
					return false
				
			},
			
			onSure: function(ofId, archieves) {
				var that = this; 
				console.log(archieves)
				uni.showModal({
					title: '提示',
					cancelText: '取消',
					confirmText: '确定',
					content: '请确认是否修改?',
					success: (res) => {
						let params = {
							ofId: ofId,
							archieves: JSON.stringify(archieves)
						}
						if (res.confirm) {
							netOrderModifyAchieve(params).then(res => {
								uni.showToast({
									title: "操作成功",
									icon: "none",
									duration: 1000
								})
								setTimeout(() => {
									let params = {
										id: ofId
									}
									netOrderDetail(params).then(res => {
										res = res.data 
										that.currentOrderid = ''
										that.list.forEach(ele => {
											if (ele.id== ofId) {
												ele.staffArchiveLog = res.staffArchiveLog
												ele.orderStaffRecords = res.orderStaffRecords
											}
										})
										this.getList()
									})
								}, 2000)
							})  
						} else {
							that.currentOrderid = ''
						}
						
					}
				})  
			},
			showModifyAchieve: function(item) {
				  var that = this; 
				  that.currentOrderid = item.id
				  var origStaffRecords = JSON.parse(item.orderStaffRecords || []); 
				  if(origStaffRecords.length > 0) {
					  
				   setTimeout(() => {
						let itemid = 'ap'+that.currentOrderid
						// let compitem = that.$refs[itemid][0]
						// let ss = compitem.archieves
						// compitem.loadOSR(origStaffRecords)
					}, 600);
					
				  }
			}, 
			togglePopup(type) {
				this.showAchievePanel= false;
				this.showOrderAuditPanel = false;
			},
			audit: function (id){
				uni.showModal({
					title: '提示',
					cancelText: '拒绝',
					confirmText: '通过',
					content: '请确认是否通过?',
					success: (res) => {
						let params = {
							ofid: id,
							status: 1
						}
						if (res.confirm) {
						} else {
							params.status = -1
						}
						
						netOrderAudit(params).then(res => {
							uni.showToast({
								title: "操作成功",
								icon: "none",
								duration: 1000
							})
							setTimeout(() => {
								this.onaudited(params)
							}, 2000)
						})  
					}
				}) 
			},
			onaudited(order) { 
				this.list.forEach(ele => {
					if (ele.id== order.ofid) {
						ele.checkStatus = order.status
					}
				})
			},
			getTip() {
				netAgentList().then(res => { 
					this.tipNumber = 0

					this.list = []
					this.page = 1
					this.totalPage = 1
					//获取客户 列表
					this.getList()
				})
			},
			queryData(params) {
				this.queryObj = params
				this.list = []
				this.page = 1
				this.getList()
			},
			getList() {
				let params = {
					page: this.page,
					limit: this.limit,
					createtime: (this.de_starttime && this.de_endtime) ? (this.de_starttime + ',' + this.de_endtime) :
						'',
					type: this.de_type == 0 ? 1 : this.de_type == 1 ? 0 : null,
					staff_id: this.de_staffid,
					...this.queryObj
				}
				netOrderList(params).then(res => {
					res = res.data
					this.list = this.list.concat(res.list)
					console.log(this.list,'=====')
					this.page = res.page
					this.totalPage = res.totalPage
				})
			},
			sortClick(data) {
				this.sort = data;
				this.screen = false;
			},
			screenClick(data) {
				this.screen = data;
				this.sort = false;
			},
			switchover(value) {
				this.screenData = value;

			},
			// 任务
			taskClick() {
				this.taskShow = true;
			},
			// 电话
			telClick(item) {
				if (item) {
					uni.showModal({
						title:item.memberName,
						content:'手机号码:' + item.mobile,
						success:(res)=>{
							if(res.confirm){
								// #ifdef MP-ALIPAY
								dd.showCallMenu({
								    phoneNumber: item.mobile, 
								    code: '+86'
								})
								// #endif
								// #ifdef MP-WEIXIN || H5 || APP-PLUS
								uni.makePhoneCall({
									phoneNumber: item.mobile
								})
								// #endif
							}
						}
					})
				} else {
					uni.showToast({
						title: '暂无联系方式',
						icon: 'none'
					})
					this.telActions = []
					this.description = ''
				}
			},
			selectPhone(e) {
				console.log(e)
				uni.makePhoneCall({
					phoneNumber: e.detail.phone
				})
			},
			onCancel() {
				this.taskShow = false;
				this.telShow = false;
			},
		}
	}
</script>

<style lang="scss">
	.clineInfo {
		background-color: #fff;
		padding: 30rpx 45rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		box-shadow: 2rpx 2rpx 50rpx rgba(0, 0, 0, 0.1);

		.info_head {
			display: flex;
			justify-content: space-between;

			:first-child {
				font-size: 34rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.info_main {
			display: flex;
			justify-content: space-between;

			.main_left {
				.left_followUp {
					display: flex;
					padding-bottom: 30rpx;
					font-size: 30rpx;
					color: #666;
				}

				.left_star {
					font-size: 30rpx;
					color: #666;
					display: flex;
					padding-bottom: 30rpx;
				}

				.left_foot {
					padding-bottom: 20rpx;

					.l_box {
						margin-right: 35rpx;
						float: left;

						span {
							background: rgba(3, 170, 150, .1);
							padding: 5rpx 12rpx;
							font-size: 26rpx;
							color: #03AA96;
							border-radius: 5rpx;
						}
					}
				}
			}

			.main_right {
				text-align: center;
				padding: 20rpx 15rpx 0 0;

				image {
					border-radius: 50%;
					width: 129rpx;
					height: 129rpx;
					margin-bottom: 5rpx;
				}
			}
		}

		.info_footer {
			display: flex;
			justify-content: space-around;
			padding-top: 30rpx;
			height: 80rpx;
			border-top: 1px solid #ededed;
			margin-top: 20rpx;

			.footer_content {
				// width: 25%;
				line-height: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 15rpx;
				}
				.icon-iconmore-copy,
				.icon-follow {
					font-size: 22rpx;
				}

				.icon-follow,
				.icon-task,
				.icon-tel {
					margin-right: 5rpx;
				}

				.icon-iconmore-copy {
					margin-left: 5rpx;
					margin-top: 2rpx;
				}
			}
		}
	}
.new_fllow {
		margin-top: 40rpx;
		font-size: 28rpx;

		.fllow_form {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 0 24rpx;

			.form_right {
				display: flex;
				color: #999;

				image {
					width: 40rpx;
					height: 40rpx;
					margin: 28rpx 5rpx 0 0;
				}
			}

			text {
				color: #f00;
				margin-left: 10rpx;
			}

			.form_input {
				input {
					height: 92%;
					// line-height: 100rpx;
					text-align: right;
					margin-right: 10rpx;
				}
			}

			.fllow_button {
				margin-top: 15rpx;
			}
		}

		.fllow_file_li {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;

			.fil_li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;

				.fileimg {
					width: 20rpx;
					height: 20rpx;
				}

				.filename {
					font-size: 24rpx;
					color: #999999;
				}

				.closeimg {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}

		.imglist {
			padding: 24rpx 34rpx;
			background: #fff;
			border-bottom: 1rpx solid #EAEAEA;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.imgbox {
				width: 160rpx;
				height: 160rpx;
				margin-right: 14rpx;
				position: relative;
				margin-bottom: 24rpx;
				border: 1rpx solid #EAEAEA;

				.delimg {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					position: absolute;
					right: -16rpx;
					top: -16rpx;
					background: rgba(0, 0, 0, 0.5);
					z-index: 2;
				}

				.selfimg {
					width: 160rpx;
					height: 160rpx;
				}
			}
		}

		.fllow_area {
			background-color: #fff;
			// padding: 0 70rpx;
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;
			color: #999;

			.area_head {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				padding: 0 70rpx;

				text {
					color: #f00;
				}
			}

			textarea {
				width: 80%;
				height: 300rpx;
				padding: 30rpx;
				background: #f8f8f8;
				margin: 0 auto;
			}
		}

		.info_head {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			color: #999;
			padding-left: 24rpx;
		}

		.affiliation {
			background-color: #fff;
			margin-bottom: 20rpx;
			padding-bottom: 40rpx;

			.aff_head {
				height: 100rpx;
				line-height: 100rpx;
				padding-left: 30rpx;

				text {
					color: #f00;
					margin-left: 10rpx;
				}
			}

			.aff_con {
				display: flex;
				text-align: center;
				flex-wrap: wrap;

				.aff_item {
					width: 100rpx;
					margin-right: 15rpx;
					border-radius: 50%;
					margin-bottom: 15rpx;

					image {
						margin-bottom: 15rpx;
						width: 60rpx;
						height: 60rpx;

					}
				}

				.affbox {
					position: relative;

					.delremind {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
						position: absolute;
						right: -16rpx;
						top: -16rpx;
						background: rgba(0, 0, 0, 0.5);
						z-index: 2;
					}
				}

				.aff_last {
					image {
						margin-bottom: 15rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}

		.follow_task {
			height: 80rpx;
			line-height: 80rpx;
		}
	}
	.icon_creat {
		position: fixed;
		z-index: 1;
		bottom: 180rpx;
		right: 80rpx;

		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
	}
</style>
